/**
 * Created by 92984 on 2017/7/9.
 */
var color={
    //灰度效果
    gray:function (canvasData) {
        for ( var x = 0; x < canvasData.width; x++) {
            for ( var y = 0; y < canvasData.height; y++) {

                // Index of the pixel in the array
                var idx = (x + y * canvasData.width) * 4;
                var r = canvasData.data[idx + 0];
                var g = canvasData.data[idx + 1];
                var b = canvasData.data[idx + 2];
                var gray = .299 * r + .587 * g + .114 * b;

                // assign gray scale value
                canvasData.data[idx + 0] = gray; // Red channel
                canvasData.data[idx + 1] = gray; // Green channel
                canvasData.data[idx + 2] = gray; // Blue channel
                canvasData.data[idx + 3] = 255; // Alpha channel
                // add black border
                /*if(x < 8 || y < 8 || x > (canvasData.width - 8) || y > (canvasData.height - 8))
                {
                    canvasData.data[idx + 0] = 0;
                    canvasData.data[idx + 1] = 0;
                    canvasData.data[idx + 2] = 0;
                }*/
            }
        }
        console.log(canvasData)
        return canvasData;
    },

    //怀旧效果
    old:function (canvasData) {
        for ( var x = 0; x < canvasData.width; x++) {
            for ( var y = 0; y < canvasData.height; y++) {

                // Index of the pixel in the array
                var idx = (x + y * canvasData.width) * 4;
                var r = canvasData.data[idx + 0];
                var g = canvasData.data[idx + 1];
                var b = canvasData.data[idx + 2];

                var dr=.393*r+.769*g+.189*b;
                var dg=.349*r+.686*g+.168*b;
                var db=.272*r+.534*g+.131*b;
                var scale=Math.random()*0.5 + 0.5;
                var fr=scale*dr+(1-scale)*r;
                scale=Math.random()*0.5 + 0.5;
                var fg=scale*dg+(1-scale)*g;
                scale=Math.random()*0.5 + 0.5;
                var fb=scale*db+(1-scale)*b;
                canvasData.data[idx + 0] = fr; // Red channel
                canvasData.data[idx + 1] = fg; // Green channel
                canvasData.data[idx + 2] = fb; // Blue channel
                canvasData.data[idx + 3] = 255; // Alpha channel
                // add black border
               /* if(x < 8 || y < 8 || x > (canvasData.width - 8) || y > (canvasData.height - 8))
                {
                    canvasData.data[idx + 0] = 0;
                    canvasData.data[idx + 1] = 0;
                    canvasData.data[idx + 2] = 0;
                }*/
            }
        }
        return canvasData;
    },
    //底片效果

    negaitves:function (canvasData) {
        for ( var x = 0; x < canvasData.width; x++) {
            for ( var y = 0; y < canvasData.height; y++) {

                // Index of the pixel in the array
                var idx = (x + y * canvasData.width) * 4;
                var r = canvasData.data[idx + 0];
                var g = canvasData.data[idx + 1];
                var b = canvasData.data[idx + 2];
                var fr=255-r;
                var fg=255-g;
                var fb=255-b;
                canvasData.data[idx + 0] = fr; // Red channel
                canvasData.data[idx + 1] = fg; // Green channel
                canvasData.data[idx + 2] = fb; // Blue channel
                canvasData.data[idx + 3] = 255; // Alpha channel
                // add black border
               /* if(x < 8 || y < 8 || x > (canvasData.width - 8) || y > (canvasData.height - 8))
                {
                    canvasData.data[idx + 0] = 0;
                    canvasData.data[idx + 1] = 0;
                    canvasData.data[idx + 2] = 0;
                }*/
            }
        }
        return canvasData;
    },
    //黑白效果
    black:function (canvasData) {
        for ( var x = 0; x < canvasData.width; x++) {
            for ( var y = 0; y < canvasData.height; y++) {

                // Index of the pixel in the array
                var idx = (x + y * canvasData.width) * 4;
                var r = canvasData.data[idx + 0];
                var g = canvasData.data[idx + 1];
                var b = canvasData.data[idx + 2];
                if((r+g+b)>=300)
                {
                    fr=fg=fb=255;
                }
                else
                {
                    fr=fg=fb=0;
                }
                canvasData.data[idx + 0] = fr; // Red channel
                canvasData.data[idx + 1] = fg; // Green channel
                canvasData.data[idx + 2] = fb; // Blue channel
                canvasData.data[idx + 3] = 255; // Alpha channel
                // add black border
                /*if(x < 8 || y < 8 || x > (canvasData.width - 8) || y > (canvasData.height - 8))
                {
                    canvasData.data[idx + 0] = 0;
                    canvasData.data[idx + 1] = 0;
                    canvasData.data[idx + 2] = 0;
                }*/
            }
        }
        return canvasData;
    },
    //浮雕效果
    cameo:function (canvasData) {
        for ( var x = 0; x < canvasData.width; x++) {
            for ( var y = 0; y < canvasData.height; y++) {

                // Index of the pixel in the array
                var idx = (x + y * canvasData.width) * 4;
                var r = canvasData.data[idx + 0];
                var g = canvasData.data[idx + 1];
                var b = canvasData.data[idx + 2];
                var idx2 = (x + (y+1) * canvasData.width) * 4;
                var r2 = canvasData.data[idx2 + 0];
                var g2 = canvasData.data[idx2 + 1];
                var b2 = canvasData.data[idx2 + 2];
                var fr=r2-r+128;
                var fg=g2-g+128;
                var fb=b2-b+128;
                var gray = .299 * fr + .587 * fg + .114 * fb;
                canvasData.data[idx + 0] = gray; // Red channel
                canvasData.data[idx + 1] = gray; // Green channel
                canvasData.data[idx + 2] = gray; // Blue channel
                canvasData.data[idx + 3] = 255; // Alpha channel
                // add black border
               /* if(x < 8 || y < 8 || x > (canvasData.width - 8) || y > (canvasData.height - 8))
                {
                    canvasData.data[idx + 0] = 0;
                    canvasData.data[idx + 1] = 0;
                    canvasData.data[idx + 2] = 0;
                }*/
            }
        }
        return canvasData;
    },
    //连环画
    comic:function (canvasData) {
        for ( var x = 0; x < canvasData.width; x++) {
            for ( var y = 0; y < canvasData.height; y++) {

                // Index of the pixel in the array
                var idx = (x + y * canvasData.width) * 4;
                var r = canvasData.data[idx + 0];
                var g = canvasData.data[idx + 1];
                var b = canvasData.data[idx + 2];

                var fr=Math.abs((g-r+g+b))*r/256;
                var fg=Math.abs((b-r+g+b))*r/256;
                var fb=Math.abs((b-r+g+b))*g/256;
                //var fr=(g-r+g+b)*r/256;
                //var fg=(b-r+g+b)*r/256;
                //var fb=(b-r+g+b)*g/256;
                canvasData.data[idx + 0] = fr; // Red channel
                canvasData.data[idx + 1] = fg; // Green channel
                canvasData.data[idx + 2] = fb; // Blue channel
                canvasData.data[idx + 3] = 255; // Alpha channel
                // add black border
                /*if(x < 8 || y < 8 || x > (canvasData.width - 8) || y > (canvasData.height - 8))
                {
                    canvasData.data[idx + 0] = 0;
                    canvasData.data[idx + 1] = 0;
                    canvasData.data[idx + 2] = 0;
                }*/

            }
        }
        return canvasData;
    },
    //毛玻璃扩散
    spread:function (canvasData) {
        for ( var x = 0; x < canvasData.width; x++) {
            for ( var y = 0; y < canvasData.height; y++) {

                // Index of the pixel in the array
                var idx = (x + y * canvasData.width) * 4;
                var r = canvasData.data[idx + 0];
                var g = canvasData.data[idx + 1];
                var b = canvasData.data[idx + 2];

                var rand=Math.floor(Math.random()*10)%3;
                var idx2 = (x+rand + (y+rand) * canvasData.width) * 4;
                var r2 = canvasData.data[idx2 + 0];
                var g2 = canvasData.data[idx2 + 1];
                var b2 = canvasData.data[idx2 + 2];
                var fr=r2;
                var fg=g2;
                var fb=b2;
                canvasData.data[idx + 0] = fr; // Red channel
                canvasData.data[idx + 1] = fg; // Green channel
                canvasData.data[idx + 2] = fb; // Blue channel
                canvasData.data[idx + 3] = 255; // Alpha channel
                // add black border
               /* if(x < 8 || y < 8 || x > (canvasData.width - 8) || y > (canvasData.height - 8))
                {
                    canvasData.data[idx + 0] = 0;
                    canvasData.data[idx + 1] = 0;
                    canvasData.data[idx + 2] = 0;
                }*/


            }
        }
        return canvasData;
    },




}